﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Tab Strip</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        spread.setSheetCount(2);
    
        $("#newtab_show").click(function () {
            spread.newTabVisible($(this).prop("checked"));

            spread.invalidateLayout();
            spread.repaint();
        });

        $("#tab_editable").click(function () {
            spread.tabEditable($(this).prop("checked"));
        });

        $("#tabstrip_visible").click(function () {
            spread.tabStripVisible($(this).prop("checked"));

            spread.invalidateLayout();
            spread.repaint();
        });

        $("#tabnavigation_Visible").click(function () {
            spread.tabNavigationVisible($(this).prop("checked"));
        });

        $("#setTabStripRatio").click(function () {
            var ratio = parseFloat($("#tabstrip_ratio").val());
            if (!isNaN(ratio)) {
                spread.setTabStripRatio(ratio);
            }
        });

        $("#setStartSheetIndex").click(function () {
            var index = $("#startSheetIndex").val();
            if (!isNaN(index)) {
                index = parseInt(index);
                if (0 <= index && index < spread.getSheetCount()) {
                    spread.startSheetIndex(index);
                }
            }
        });

        $("#setSheetTabColor").click(function () {
            var sheet = spread.getActiveSheet();
            if (sheet) {
                var color = $("#sheetTabColor").val();
                sheet.sheetTabColor(color);
            }
        });
    });
    /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:410px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="checkbox" id="newtab_show" checked />
                <label for="newtab_show">ShowNewTab</label>
                <input type="checkbox" id="tab_editable" checked />
                <label for="tab_editable">TabEditable</label>
                <input type="checkbox" id="tabstrip_visible" checked />
                <label for="tabstrip_visible">TabStripVisible</label>
                <input type="checkbox" id="tabnavigation_Visible" checked />
                <label for="tabnavigation_Visible">TabNavigationVisible</label>
            </div>
            <div class="option-row">
                <label for="sheetTabColor" style="display: inline-block;width: 150px">ActiveSheetTabColor:</label>
                <input type="text" id="sheetTabColor" value="red" />
                <input type="button" id="setSheetTabColor" value="Set" />
            </div>
            <div class="option-row">
                <label for="startSheetIndex" style="display: inline-block;width: 150px">StartSheetIndex:</label>
                <input type="text" id="startSheetIndex" value="0" />
                <input type="button" id="setStartSheetIndex" value="Set" />
            </div>
            <div class="option-row">
                <label for="tabstrip_ratio" style="display: inline-block;width: 150px">TabStripRatio:</label>
                <input type="text" id="tabstrip_ratio" value="0.5" />
                <input type="button" value="Set" id="setTabStripRatio" />
            </div>
        </div>
    </div>
</body>
</html>
